<template>
  <div>
  <h3>练习</h3>
     <table>
         <thead>
             <tr>
                  <th>序号</th>
                  <th>书名</th>
                  <th>价格</th>
                  <th>作者</th>
             </tr>
         </thead>
         <tbody>
             <tr v-for="(x,y) in arr" :key="y">
                  <td v-for="(z,m) in x" :key="m">{{z}}</td>
             </tr>
         </tbody>
     </table>
<hr/>
   <h1>条件渲染</h1>

<input type="text" v-model="score">
<p v-if="score>0&&score<60" class="score">不及格</p>
<p v-else-if="score>=60&&score<90" class="score">优秀</p>
<p v-else class="score">完美</p>
<hr/>
<p v-if="score>0&&score<60">不及格</p>
<div v-else>
    <p>及格</p>
    <p v-if="score>=60&&score<90" class="score">优秀</p>
    <p v-else class="score">完美</p>
</div>
<hr/>
 <input type="text" v-model="type">
 <span v-if="type=='A'">家具</span>
 <span v-else-if="type=='B'">电子产品</span>
 <span v-else-if="type=='C'">农产品</span>
 <span v-else>未识别类型</span>
<hr/>
<pre> v-show 另一个根据条件显示</pre>
<p v-show="flag">以登录</p>
<p v-show="!flag">未登录</p>

<!-- *************************************** -->
<hr/>
<h1>事件处理器</h1>
<input type="text" :value="num">
<input type="button" v-on:click="num+=1" value="添加1">
<!-- 简写形式 -->
<input type="button" @click="num+=2" value="添加2"><br>
<span v-if="flag">开</span>
<span v-else>关</span>
<input type="button" @click="flag = !flag" value="开关"><br>
<input type="button" @click="updata" value="事件处理函数"><br>
<input type="button" @click="add" value="+">
<input type="text" :value="nums">
<input type="button" @click="ads" value="-">
<hr/>
<button @click="say('Hi')">say Hi</button>
<button @click="say('GoodBy')">say CoodBye</button>

<hr/>
<button @click="eventHandle1($event,'1')">事件-this</button>
<hr/>
<div id="box2"></div>
<button ref="btn2" @click="event1($event)">边框</button>
<button ref="btn3" @click="event2($event)">圆角</button>
<button ref="btn4" @click="event3($event)">蓝色</button>
<hr/>
<h1>style 与 class绑定</h1>
<hr/>
   <div class="box" :class="classname">元素一</div>
   <div class="box" :class="{success:false}">元素2</div>
 <div class="box" :class="{success:flag}">元素3</div>
 <div class="box" :class="{success:flag,'b-r':isactive}" @click="isactive = !isactive">元素4</div>
  <button @click="flag=!flag">切换</button>
   <hr/>
   <div class="box" :class="classobject"></div>
   <button @click="classobject['b-r']=!classobject['b-r']">切换b-r</button>

 <button @click="classobject['success']=!classobject['success']">切换success</button>
<hr/>
<div class="box" :class="statusClass?'success':'error'"  @click="statusClass = ! statusClass"></div>
<button @click="statusClass = ! statusClass">切换success&error</button>
<hr/>
<div class="box" :class="[!statusClass?'success':'error','mg']"></div>
<div :class="['box',!statusClass?'success':'error']"></div>

<hr/>
<h3>style行间样式</h3>
<div class="box" :style="{fontSize:StyleClass.fontSize,color:StyleClass.color}">测试内容</div>
<div class="box" :style="[StyleClass1]">测试内容</div>
<div class="box" :style="[StyleClass1,StyleClass2]">测试内容</div>
<hr/>
<!-- 行间央视设置图片 -->
<h4>行间样式设置图片</h4>
<!-- <img src="./../../assets/logo.png" alt=""> -->
<div class="box" :style="'background:url('+logoURL+')'"></div>
<div class="box" :style="'background:url(/imgs/logo.png)'"></div>
<div class="box cons"></div>


  </div>
</template>

<script>
import logo from "./../../assets/logo.png"
export default {
    data(){
        return{
            arr:[
                {id:1,bookname:'三国演义',pri:35,author:"罗贯中"},
                {id:2,bookname:'水浒传',pri:56,author:"施耐庵"},
                {id:3,bookname:'红楼梦',pri:89,author:"曹雪晴"},
                {id:4,bookname:'西游记',pri:78,author:"吴承恩"}
            ],
            flag:true,
            score:50,
            type:"A",
            num:0,
            nums:0,
             classname:"success",
           flag:false,
           isactive:false,
           classobject:{
               success:true,
               'b-r':true,
           },
           statusClass:true,
           StyleClass:{
           fontSize:"2rem",
           bgColor:"purple",
           color:"red"
            },
            StyleClass1:{
                fontSize:"3rem",
                color:"orange",
            },
            bgimg:"./../../assets/logo.png",
            StyleClass2: {
              borderRudus:'100%'
            },
            logoURL:logo,
           
        }
    },
    // 函数----事件函数和普通函数
    methods:{
        updata(){
            this.num = 100
        },
        add(){
            this.nums += 1
        },
        ads(){
            this.nums -= 1
        },
        say(msg){
            alert(msg)
        },
        enentHandle1(e,A){
            // this ---当前组件
            console.log(e,A)
        },
        eventHandle2(){
            console.log(this.$refs);
            let text = this.$refs["p1"].innerText;
            console.log(text)
        },
        event1(e){
            console.log(e.target)
            var a = document.getElementById('box2');
            a.style.border = "10px solid orange"
        },
        event2(e){
            console.log(e.target)
            var a = document.getElementById('box2');
            a.style.borderRadius = "100%"
        },
         event3(e){
        console.log(e.target)
        var a = document.getElementById('box2')
        a.style.background = "blue"
      }
    }
}
</script>

<style>
.cons{
    background: url('./../../assets/logo.png');
}
img{
    width: 100px;
    height: 100px;
}
.box{
    width: 200px;
    height: 200px;
    color: #fff;
    border: 5px solid blue;
}
.success{
    background: pink;
}
.error{
    background: orange;
}
.info{
    background: #999;
}
.b-r{
    border-radius: 100%;
}
.mg{
    margin: 100px;
}
table{
    margin:20px auto;
    border: 1px solid #000;
    border-collapse: collapse;
  
}
th{
    padding: 10px;
    width: 100px;
    border: 1px solid #000;
}
td{
      padding: 10px;
    border: 1px solid #000;
}
#box2{
    width: 100px;
    height: 100px;
}
</style>